import 'dart:ui';

import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:jd_flutter/keepAlive/keep_alive_wrapper.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<Map> _imgList = const [
    {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
    {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
    {"url": "https://www.itying.com/images/flutter/slide03.jpg"},
  ];

  //轮播图
  Widget _swiperWidget() {
    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Swiper(
        itemCount: _imgList.length,
        itemBuilder: (context, index) {
          return Image.network(_imgList[index]["url"]);
        },
        autoplay: true,
        scrollDirection: Axis.horizontal,
        pagination: const SwiperPagination(),
        // control: const SwiperControl(),
      ),
    );
  }

  Widget _titleWidget(String title) {
    return Container(
      height: 32.h,
      margin: EdgeInsets.only(left: 10.w),
      padding: EdgeInsets.only(left: 10.w),
      decoration: const BoxDecoration(
          border: Border(left: BorderSide(color: Colors.red, width: 4))),
      child: Text(
        title,
        style: const TextStyle(color: Colors.black54),
      ),
    );
  }

  Widget _hotProductListWidget() {
    return SizedBox(
      height: 180.h,
      // width: double.infinity,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 10,
          itemBuilder: (context, index) {
            return Column(
              children: [
                Container(
                  width: 140.w,
                  height: 140.h,
                  padding: EdgeInsets.all(10.w),
                  child: Image.network(
                      "https://www.itying.com/images/flutter/hot${index + 1}.jpg",
                      fit: BoxFit.cover),
                ),
                Text("第${index + 1}条")
              ],
            );
          }),
    );
  }

  Widget _recProductLIstWidget() {
    return InkWell(
      child: Container(
          width: double.infinity,
          padding: EdgeInsets.all(10.w),
          child: GridView.builder(
              itemCount: 10,
              //Container跟随GridView内容变化高度, shrinkWrap:true;
              shrinkWrap: true,
              //取消滚动效果physics: NeverScrollableScrollPhysics();
              physics:const NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 0.74,
                  crossAxisCount: 2,
                  crossAxisSpacing: 10.w
              ),
              itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                      border: Border.all(
                          color: const Color.fromRGBO(233, 233, 233, 0.9),
                          width: 1
                      )
                  ),
                  padding: EdgeInsets.fromLTRB(10.w, 10.h, 10.w, 0.h),
                  margin: EdgeInsets.only(bottom: 10.h),
                  child: Column(
                    children: [
                      Image.network("https://www.itying.com/images/flutter/list${index + 1}.jpg", fit: BoxFit.cover),
                      Text("2024夏季推荐商品${index + 1}贵气太太有女人味中长款宽松大码实惠便宜优雅美观",
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 2.h),
                        child: const Stack(
                          children: [
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text("￥188.0", style: TextStyle(
                                  color: Colors.red,
                                  fontSize: 16
                              )),
                            ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: Text("￥198.0", style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 14,
                                  decoration: TextDecoration.lineThrough
                              )),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                );
              }
          )
      ),
      onTap: (){
        Get.toNamed("/prodContent");
      },
    );
  }


  @override
  Widget build(BuildContext context) {
    //ScreenUtil插件，可以根据设计稿的宽高，按照比例动态改变我们的宽高值
    //使用前必须init初始化
    //.w表示宽度  .h表示高度 .sp表示字体大小
    ScreenUtil.init(context, designSize: const Size(750, 1334));

    return KeepAliveWrapper(child: ListView(
        children: [
          _swiperWidget(),
          SizedBox(height: 10.h),
          _titleWidget("猜你喜欢"),
          _hotProductListWidget(),
          _titleWidget("热门推荐"),
          _recProductLIstWidget(),
        ])
    ) ;
  }
}
